<template>
  <!-- 新闻卡片容器：置顶卡片特殊样式 -->
  <view class="news-card" :class="{ 'top-card': isTop }">
    <!-- 置顶标识 -->
    <view v-if="isTop" class="top-tag">置顶</view>
    
    <!-- 新闻封面图（可选） -->
    <image v-if="coverImg" :src="coverImg" mode="aspectFill" class="cover-img" />
    
    <!-- 新闻标题 -->
    <view class="news-title" @click="$emit('titleClick', title)">
      {{ title }}
    </view>
    
    <!-- 元信息栏：作者/时间/阅读/评论/点赞 -->
    <view class="meta-bar">
      <text class="author" @click="$emit('authorClick', author)">{{ author }}</text>
      <view class="meta-right">
        <text class="meta-item">{{ time }}</text>
        <text class="meta-item">阅读：{{ formatCount(readCount) }}</text>
        <text class="meta-item">评论：{{ formatCount(comments) }}</text>
        <!-- 点赞按钮 -->
        <view class="like-btn" @click.stop="toggleLike">
          <text :class="{ 'liked': isLiked }">❤️</text>
          <text class="like-count">{{ formatCount(likeCount) }}</text>
        </view>
      </view>
    </view>
    
    <!-- 自定义插槽：扩展内容（如黄金图表） -->
    <slot></slot>
    
    <!-- 底部插槽：额外功能（如相关标签） -->
    <slot name="footer"></slot>
  </view>
</template>

<script>
export default {
  name: "TopNewsCard", // 组件名规范
  // Props：完整类型校验+默认值
  props: {
    title: { type: String, required: true, default: "未命名新闻" },
    isTop: { type: Boolean, required: true, default: false },
    author: { type: String, required: true, default: "匿名作者" },
    comments: { type: [String, Number], required: true, default: 0 },
    time: { type: String, required: true, default: "未知时间" },
    coverImg: { type: String, required: false, default: "" }, // 新增：封面图
    readCount: { type: [String, Number], required: false, default: 0 }, // 新增：阅读量
    likeCount: { type: [String, Number], required: false, default: 0 }, // 新增：点赞数
    isLiked: { type: Boolean, required: false, default: false } // 新增：是否已点赞
  },
  methods: {
    // 格式化数字（万级简化）
    formatCount(count) {
      const num = Number(count);
      if (isNaN(num)) return "0";
      return num >= 10000 ? `${(num / 10000).toFixed(1)}万` : num;
    },
    // 切换点赞状态（触发父组件事件）
    toggleLike() {
      this.$emit("likeClick", {
        title: this.title,
        isLiked: !this.isLiked,
        newCount: !this.isLiked ? Number(this.likeCount) + 1 : Number(this.likeCount) - 1
      });
    }
  }
};
</script>

<style scoped>
/* 基础卡片样式：响应式+阴影+圆角 */
.news-card {
  background: #fff;
  padding: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  position: relative;
  margin-bottom: 20rpx;
  transition: all 0.2s ease;
}
.news-card:hover {
  transform: translateY(-3rpx);
  box-shadow: 0 6rpx 25rpx rgba(0, 0, 0, 0.08);
}

/* 置顶卡片：红色左边框+置顶标签 */
.top-card {
  border-left: 8rpx solid #f5222d;
}
.top-tag {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  background: #f5222d;
  color: #fff;
  font-size: 22rpx;
  font-weight: 600;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  z-index: 1;
}

/* 封面图 */
.cover-img {
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  margin-bottom: 18rpx;
  object-fit: cover;
}

/* 新闻标题：行高+ hover变色 */
.news-title {
  font-size: 34rpx;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.6;
  margin-bottom: 18rpx;
  cursor: pointer;
}
.news-title:hover {
  color: #4096ff;
}

/* 元信息栏：flex布局，对齐优化 */
.meta-bar {
  font-size: 26rpx;
  color: #888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
  flex-wrap: wrap;
  gap: 10rpx;
}
.author {
  color: #4096ff;
  cursor: pointer;
}
.meta-right {
  display: flex;
  align-items: center;
  gap: 15rpx;
  flex-wrap: wrap;
}
.meta-item {
  color: #999;
  font-size: 24rpx;
}

/* 点赞按钮：交互样式 */
.like-btn {
  display: flex;
  align-items: center;
  gap: 6rpx;
  cursor: pointer;
}
.like-btn .liked {
  color: #f5222d;
}
.like-count {
  font-size: 24rpx;
  color: #999;
}
</style>